import React, {Component} from 'react'
import {Table, Popconfirm} from 'antd'
import moment from "moment";

export default class ArticleList extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    renderColumn() {
        const {onDelete, onModify,onPreView} = this.props
        console.log(this.props)
        return [
            {
                title: '标题', dataIndex: 'a_title', width: '20%', key: 'a_title',
                render: function (text, record, index) {
                    return (<span>{text}</span>)
                },
            },
            {
                title: '简介', dataIndex: 'a_introduce', width: '20%', key: 'a_introduce',
                render: function (text, record, index) {
                    return (<span>{text}</span>)
                },
            },
            {
                title: '发布时间', dataIndex: 'a_create_time', width: '20%', key: 'a_create_time',
                render: function (text, record, index) {
                    return (<span>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</span>)
                },
            },
            {
                title: '创建人', dataIndex: 'user_name', width: '10%', key: 'user_name',
                render: function (text, record, index) {
                    return (<span>{text}</span>)
                },
            },
            {
                title: '操作', width: '20%', key: 'operation',
                render: (text, record, index) => (
                    <span>
                        <a onClick={() => onPreView(record.article_id)}>预览</a>
                        <span className="ant-divider"/>
                        <a onClick={() => onModify(record.article_id)}>修改</a>
                        <span className="ant-divider"/>
                        <Popconfirm title="删除?" onConfirm={() => onDelete(record.article_id)}>
                            <a>删除</a>
                        </Popconfirm>
                    </span>
                ),
            },
        ]
    }

    render() {
        const {dataSource, tableDataPageSize, tableDataTotal, tableDataTurnPage, loading, scroll} = this.props
        console.log(this.props)
        return (
            <div className="table-scrollfix">
                <Table
                    columns={this.renderColumn()}
                    dataSource={dataSource}
                    loading={loading}
                    scroll={{y: true}}
                    pagination={{
                        pageSize: tableDataPageSize,
                        total: tableDataTotal,
                        onChange: tableDataTurnPage
                    }}
                    bordered
                    rowKey="article_id"
                />
            </div>
        )
    }
}
